<template>
<div style="width: 49%;">
    <canvas style="width: 100%; height: auto; aspect-ratio: 1/1;" id="solarSystemCanvas"></canvas>
</div>

</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { getPlanetPosition, planetsConst } from '../api/calc';
import type { Setting } from '../App.vue';

const props = defineProps<{
    setting: Setting
    scale: number
}>();

let canvas :HTMLCanvasElement | null = null;
const dpr = window.devicePixelRatio || 1;

const drawSolarSystem = () => {
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    const width = canvas.clientWidth * dpr;
    const height = canvas.clientHeight * dpr;
    const scale = props.scale * dpr;
    canvas.width = width;
    canvas.height = height;

    const x0 = width / 2;
    const y0 = height / 2;
    const R = Math.min(width, height) / 2 - 20;

    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, width, height);

    // 画行星的轨道

    const pos = getPlanetPosition(new Date());
    pos.forEach((planet, index)=>{
        ctx.strokeStyle = '#888'
        const r = R*0.9 * (index + 1) / pos.length + R*0.1;
        ctx.beginPath();
        ctx.arc(x0, y0, r, 0, Math.PI * 2);
        ctx.lineWidth = 1 * scale;
        ctx.stroke();

        ctx.fillStyle = planetsConst[index].color;
        const x = x0 + r * Math.cos(planet.hElon);
        const y = y0 - r * Math.sin(planet.hElon);

        ctx.beginPath();
        ctx.arc(x, y, 6 * scale, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillStyle = '#ffffff88';
        ctx.font = fontsize * dpr + 'px Arial';
        ctx.fillText(planetsConst[index].name, x - fontsize * dpr / 2, y + fontsize * dpr * 1.4);
    });

    // 中间画太阳， 辉光效果
    const sunRadius = 40 * scale;
    const gradient = ctx.createRadialGradient(x0, y0, 0, x0, y0, sunRadius);
    gradient.addColorStop(0, 'rgba(255, 255, 0, 1)');
    gradient.addColorStop(0.4, 'rgba(255, 165, 0, 0.7)');
    gradient.addColorStop(0.7, 'rgba(255, 69, 0, 0.4)');
    gradient.addColorStop(1, 'rgba(255, 200, 0, 0)');

    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(x0, y0, sunRadius, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = 'yellow';
    ctx.beginPath();
    ctx.arc(x0, y0, sunRadius*0.3, 0, Math.PI * 2);
    ctx.fill();

};

let timer: number | null = null;
let obs: ResizeObserver | null = null;
let fontsize = 14;

const setSize = () => {
    const width = document.getElementById('rightBox')?.clientWidth;
    if (width) {
        fontsize = width / 50;
    }
    if (canvas) drawSolarSystem();
};

onMounted(() => {
    canvas = document.getElementById('solarSystemCanvas') as HTMLCanvasElement;
    timer = setInterval(() => { drawSolarSystem(); }, props.setting.solarSystemInterval*1000);
    drawSolarSystem();
    setSize();
    obs = new ResizeObserver(setSize);
    obs.observe(document.getElementById('rightBox') as HTMLElement);
});


onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
    }
    if (obs) {
        obs.disconnect();
    }
});


</script>